<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
#ul{
    display: none;
    list-style: none;
    width: 50px;
    height: 70px;
    /* display: block; */
    border:1px solid red ;

}
li{
    width: 50px;
    height: 20px;
    margin-left: -20px;

}

    </style>
</head>
<body>
    <div>
        <input type="button" value="输入法" onclick="shurufa()">
        <ul id="ul">
            <li>简写</li>
            <li>拼音</li>
            <li onclick="guanbu()"  class="pop2">关闭</li>
        </ul>
    </div>
</body>
</html>
<script>
    
let arr=document.getElementById("ul")
let  arr1=document.getElementsByTagName('li')

function shurufa(){
arr.style.display="block"
}
function guanbu(){
arr.style.display="none"

}
for (var i=0;1<arr1.length;i++){
 
    arr1[i].onmouseover=function(){
        this.style.background="red"
    }
    arr1[i].onmouseout=function(){
        this.style.background=''
    }
}
</script>